<template>
	<div class="status-predict">
		<container-item title="状态预测">
			<el-carousel
				:interval="5000"
				:loop="false"
				indicator-position="none"
				:autoplay="false"
				arrow="always"
				class="carousel">
				<el-carousel-item
					class="carousel-item"
					v-for="(itemList, index) in allList"
					:key="index">
					<div class="flex justify-around" style="margin-bottom: 15px">
						<div
							class="item"
							v-for="(item, idx) in itemList"
							:key="'carousel' + idx">
							<h3>{{ item.stationName }}</h3>
							<div class="item-module flex flex-col justify-start">
								<h4>换流阀状态预警</h4>
								<div class="module flex justify-around">
									<div class="anode">
										<p @click="handleDetail">{{ item.hlfztyj && item.hlfztyj.anode ? item.hlfztyj.anode : 0 }}</p>
										<label>正极</label>
									</div>
									<div class="cathode">
										<p @click="handleDetail">{{ item.hlfztyj && item.hlfztyj.cathode ? item.hlfztyj.cathode : 0 }}</p>
										<label>负极</label>
									</div>
								</div>
								<h4>阀冷系统状态预警</h4>
								<div class="module flex justify-around">
									<div class="anode">
										<p @click="handleDetail">{{ item.flxtztyj && item.flxtztyj.anode ? item.flxtztyj.anode : 0 }}</p>
										<label>正极</label>
									</div>
									<div class="cathode">
										<p @click="handleDetail">{{ item.flxtztyj && item.flxtztyj.cathode ? item.flxtztyj.cathode : 0 }}</p>
										<label>负极</label>
									</div>
								</div>
								<h4>光CT状态预警</h4>
<!--								<div class="module flex justify-center">-->
<!--									<div :class="item.ct ? 'anode' : 'cathode'">-->
<!--										<p>{{ item.ct }}</p>-->
<!--										<label>纯光式</label>-->
<!--									</div>-->
<!--								</div>-->
							</div>
						</div>
					</div>
					<h2>状态预测</h2>
					<div class="scroll">
						<div v-for="item in predictList" :key="item.alarm_id" class="item">
							<p>{{ item.pt }}</p>
							<div class="tip">
								<span>{{ item.alarm_time }}</span>
								<span>{{ item.station }}</span>
								<span class="desc" @click="handle">{{ item.alarm_desc }}</span>
								<el-button type="text" @click="handle">查看</el-button>
							</div>
						</div>
					</div>
				</el-carousel-item>
			</el-carousel>
		</container-item>
		<pub-dialog
			:title="dialog.title"
			:top="'10vh'"
			:dialogVisible="dialog.visible"
			dialogVisableRef="dialogVisible"
			@switchVisable="switchVisable"
			@dialogCancel="dialogCancel"
			class="dialog"
			btnType="2">
			<div class="top flex justify-between">
				<div class="chart-area">
					<h3>{{dialogData.alg_name}}</h3>
					<div class="chart"></div>
				</div>
				<div class="top-right">
					<div class="status">
						<label :style="getBackColor(dialogData.result_code)">{{ dialogData.result_code > 0 ? '状态异常' : '状态正常' }}</label>
						<p>{{ dialogData.result_desc }}</p>
					</div>
					<div class="analysis">
						<label :style="getBackFXColor()">风险分析</label>
						<p>{{ dialogData.risk_analysis }}</p>
					</div>
				</div>
			</div>
			<div class="bot">
				<label :style="getBackFXColor()">处理建议</label>
				<p>{{ dialogData.suggestions }}</p>
			</div>
		</pub-dialog>
	</div>
</template>

<script>
import ContainerItem from "@/components/ContainerItem";
import PubDialog from "@/components/pubDialog.vue";
import statusPredictResponse from './json/statusPredict.json';
import statusPredictDetailResponse from './json/statusPredictDetail.json';

export default {
	name: "statusPredict",
	components: {
		PubDialog,
		ContainerItem,
	},
	data() {
		return {
			initialIndex: 0,
			allList: [],

			predictList: [
				{ id: "1", alarm_time: "2024-09-09 16:18:00", station: "中都站", alarm_desc: "【中都站】【正极换流阀A相上桥臂阀塔1】子模块状态异常" },
				{ id: "2", alarm_time: "2024-09-09 16:18:00", station: "中都站", alarm_desc: "【中都站】【正极换流阀A相上桥臂阀塔1】子模块状态异常" },
				{ id: "3", alarm_time: "2024-09-09 16:18:00", station: "中都站", alarm_desc: "【中都站】【正极换流阀A相上桥臂阀塔1】子模块状态异常" },
				{ id: "4", alarm_time: "2024-09-09 16:18:00", station: "中都站", alarm_desc: "【中都站】【正极换流阀A相上桥臂阀塔1】子模块状态异常" },
				{ id: "5", alarm_time: "2024-09-09 16:18:00", station: "中都站", alarm_desc: "【中都站】【正极换流阀A相上桥臂阀塔1】子模块状态异常" },
				{ id: "6", alarm_time: "2024-09-09 16:18:00", station: "中都站", alarm_desc: "【中都站】【正极换流阀A相上桥臂阀塔1】子模块状态异常" },
				{ id: "7", alarm_time: "2024-09-09 16:18:00", station: "中都站", alarm_desc: "【中都站】【正极换流阀A相上桥臂阀塔1】子模块状态异常" },
				{ id: "8", alarm_time: "2024-09-09 16:18:00", station: "中都站", alarm_desc: "【中都站】【正极换流阀A相上桥臂阀塔1】子模块状态异常" },
			],

			dialog: {
				title: "",
				visible: false,
			},
			dialogData: {
				suggestions: "",
				risk_analysis: "",
				result_desc: "",
				alg_name: "",
			}
		};
	},
	created() {
		this.getData()
	},
	methods: {
		// 封装替换逻辑的函数
		replaceProperties(item, replacements) {
			const newItem = {...item}; // 创建对象的浅拷贝
			for (const key in replacements) {
				// if (newItem.hasOwnProperty(key) && replacements[key].hasOwnProperty(newItem[key])) {
				// 	newItem[key] = replacements[key][newItem[key]];
				// }
				if (key in newItem && newItem[key] in replacements[key]) {
					newItem[key] = replacements[key][newItem[key]];
				}
			}
			return newItem;
		},

		// 转换数据结构
		transformData(data) {
			const dataList = [];
			let stationData = {}
			data.forEach(item => {
				const {station, device, location, total} = item;

				// 如果station不在结果对象中，则添加它
				if (!dataList.some(obj => obj.stationName === station)) {
					stationData = {
						"id": station.includes("中") ? 1 : station.includes("阜") ? 2 : 3,
						"stationName": station
					};
					dataList.push(stationData)
				}

				// 如果device不在station对象中，则添加它
				if (!stationData[device]) {
					stationData[device] = {};
				}

				// 添加或覆盖location和total
				stationData[device][location] = total;

			});

			return dataList;
		},

		getData() {
			// 定义替换规则
			const replacements = {
				station: {
					"zdz": "中都换流站",
					"fkz": "阜康换流站",
					"kbz": "康巴诺尔换流站"
				},
				device: {
					'cv': 'hlfztyj',
					'vcs': 'flxtztyj',
					'ct': 'gctztyj'
				},
				location: {
					'pos': 'anode',
					'neg': 'anode',
					'ac': 'jlc',
					'bt': 'qdq',
					'vh': 'ft',
					'dc': 'zlc',
				}
			};

			// 应用替换规则到数组中的每个对象
			new Promise(resolve => {
				const replacedData = statusPredictResponse.data.stats.map(item => this.replaceProperties(item, replacements));
				resolve(replacedData)
			}).then(res => {
				// 应用转换函数生成需要的数据结构
				const transformedData = this.transformData(res);
				this.allList.push(transformedData)
			});

		},

		// 点击状态进入详情
		handle() {
			this.dialog.visible = true;
			this.dialogData = statusPredictDetailResponse.data;
			this.dialog.title = "设备名称：" + statusPredictDetailResponse.data.device_name;
		},
		// 监听弹窗关闭
		switchVisable(visable, ref) {
			this[ref] = visable;
		},
		// 设置背景颜色
		getBackColor(state) {
			return {
				background:
					state == "0" || state == "3" ? "#1cbe21" : state == "1" ? "#ffaa00" : state == "2" ? "#ff3737" : "#1cbe21",
			};
		},
		getBackFXColor() {
			return {
				background: "#6ac144"
			};
		},
		// 关闭弹窗
		dialogCancel() {
			this.dialog.visible = false;
		},
		// 查看详情
		handleDetail() {
			this.$router.push({
				path: "/statusPredict/detail"
			})
		},
	},
};
</script>
<style lang="less">
.status-predict {
	height: 100%;
	width: 100%;
	.carousel {
		.el-carousel__container {
			height: 100% !important;
			width: 100% !important;

			.el-carousel__arrow {
				width: 64px;
				height: 64px;
				font-size: 48px;
				font-weight: bold;
			}
		}
	}
}
</style>
<style scoped lang="less">
.fakeEle(@content: "") {
	position: absolute;
	content: @content;
}
.carousel {
	width: 100%;
	height: 100%;
	.el-icon-arrow-right {
		color: #ffffff;

		&:before {
			position: absolute;
			content: "";
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 0;
			height: 0;
			border-left: 15px solid #86fffb;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
		}
	}
	.el-icon-arrow-left {
		color: #ffffff;
		&:before {
			position: absolute;
			content: "";
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 0;
			height: 0;
			border-right: 15px solid #86fffb;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
		}
	}

	.carousel-item {
		width: 90%;
		height: 100%;
		margin: 0 5%;
		//display: flex;
		//justify-content: space-around;

		.item {
			width: 30%;
			height: 645px;
			h3 {
				text-align: center;
				color: #ffffff;
				font-size: 22px;
				font-weight: 500;
				line-height: 3em;
				background: url("../../assets/images/type_bg.png") no-repeat center center;
				background-size: 90% 80%;
				margin-bottom: 10px;
			}

			.item-module {
				width: 100%;
				height: 570px;
				background: linear-gradient(-69.7deg, #091318, #203136);
				border: 1px solid #006686;
				padding: 15px;
				box-sizing: border-box;

				h4 {
					color: #ffffff;
					font-size: 16px;
					font-weight: bold;
					line-height: 40px;
				}
				p {
					height: 72px;
					width: 72px;
					border-radius: 50%;
					line-height: 72px;
					color: #FFFFFF;
					font-size: 16px;
					font-weight: bold;
				}
				label {
					color: #FFFFFF;
					font-size: 16px;
					font-weight: bold;
					line-height: 32px;
				}
				.module {
					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
					border: 1px solid rgba(255, 255, 255, 0.1);
					padding: 15px 0;
					.anode {
						width: 72px;
						text-align: center;
						p {
							background: #E6A23C;
							cursor: pointer;
						}
					}

					.cathode {
						width: 72px;
						text-align: center;
						p {
							background: #67C23A;
							cursor: pointer;
						}
					}
				}
			}
		}

		h2 {
			font-size: 22px;
			font-weight: 500;
			line-height: 36px;
			color: #FFFFFF;
			text-shadow: 2px 2px 6px rgba(109, 238, 250, .16);
			font-family: "Source Han Sans";
			position: relative;
			padding-left: 58px;
			&:before {
				.fakeEle();
				left: 32px;
				top: 50%;
				transform: translateY(-50%);
				border-left: 12px solid #40e5f0;
				border-top: 7px solid transparent;
				border-bottom: 7px solid transparent;
			}

			&:after {
				.fakeEle();
				left: 24px;
				top: 50%;
				transform: translateY(-50%);
				border-left: 12px solid rgba(64, 229, 240, .5);
				border-top: 7px solid transparent;
				border-bottom: 7px solid transparent;
			}
		}

		// 外层盒子
		.scroll {
			height: calc(100% - 25px);
			width: 100%;
			overflow-y: auto;
			box-sizing: border-box;
			margin-top: 10px;
			// 里面的每一条
			.item {
				height: 64px;
				width: 100%;
				box-sizing: border-box;
				border-bottom: 1px solid #006686;
				margin-bottom: 10px;
				padding: 0 10px;

				p {
					line-height: 32px;
					height: 32px;
					color: #ffffff;
				}

				.tip {
					line-height: 32px;
					height: 32px;
					display: flex;
					justify-content: space-between;
					span {
						color: #eee;
						font-size: 15px;
						&.desc {
							color: #1da9ed;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
}
.pub-dialog {
	.top {
		height: 400px;
		.chart-area {
			flex: 1;
			width: 100%;
			h3 {
				color: #c6d3ec;
				line-height: 36px;
				font-size: 20px;
			}
			.chart {
				height: calc(100% - 36px);
			}
		}
		.top-right {
			width: 300px;
			.status {
				margin-bottom: 10px;
			}
		}
	}
	label {
		display: block;
		line-height: 48px;
		text-align: center;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: bold;
	}
	p {
		color: #FFFFFF;
		font-size: 16px;
		line-height: 36px;
		height: 147px;
		overflow-y: auto;
		padding: 10px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-top: 0;
	}
	.bot {
		display: flex;
		margin-top: 10px;
		height: 90px;
		label {
			width: 150px;
			line-height: 90px;
		}
		p {
			flex: 1;
			height: 90px;
			border: 1px solid rgba(255, 255, 255, 0.1);
			border-left: 0;
		}
	}
}
</style>
